// 实现我们的登录逻辑

// 获取元素
const formBtn = document.querySelector('form')
const userName = document.querySelector('.username')
const passWord = document.querySelector('.password')
const errBox = document.querySelector('.errBox')

// 给我们的form表单添加提交事件
formBtn.addEventListener('submit', e => {
    console.log(111);
    // 事件对象兼容
    e = e || window.event
    // 阻止默认行为
    try { e.preventDefault() } catch (err) { e.returnValue = false }

    // 获取用户输入的账号和密码
    // 不需要去除首尾的空格 用户怎么书写你怎么收集
    let nameValue = userName.value
    let passWordValue = passWord.value

    // 接下来要做的就是非空验证
    if (!nameValue || !passWordValue) return alert('请完整输入用户名和密码')


    // 发送请求到后端
    const xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://localhost:8888/users/login')
    xhr.onload = () => {
        let res = JSON.parse(xhr.responseText)
        console.log(res);

        // 判断是不是登录成功
        if (res.code !== 1) {
            errBox.style.display = 'block'
            return
        }

        window.localStorage.setItem('token', res.token)
        window.localStorage.setItem('id', res.user.id)
        // 代码能执行到这里说明登录成功
        // 跳转到首页
        window.location.href = './index.html'

    }
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    xhr.send(`username=${nameValue}&password=${passWordValue}`)


})